import {
  gantt
} from 'dhtmlx-gantt' // 引入插件

export const ganttConfig = () => {
  // 设置任务条进度内容
  gantt.templates.progress_text = function (start, end, task) {
    return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) +
      '% </div>'
  }

  // 任务条显示内容
  gantt.templates.task_text = function (start, end, task) {
    // return task.text + '(' + task.duration + '天)';
    return "<span style='text-align:center;color:#fff;display: block'>" + task.text + '(' + task.duration + '天)' + '</span>'
  }

  // 任务条上的文字大小 以及取消border自带样式
  gantt.templates.task_class = function (start, end, item) {
    return item.$level === 0 ? 'firstLevelTask' : 'secondLevelTask'
  }

  // 表格列设置
  const colHeader = '<i class="el-icon-circle-plus" data-action="add" onclick="gantt.AddTask()"></i>'
  gantt.config.columns = [
    {
      'name': 'text',
      'tree': true,
      'width': 146,
      'resize': true,
      'label': '项目名'
    },
    {
      'name': 'start_date',
      'align': 'center',
      'resize': true,
      'label': '开始时间',
      'width': 190
    },
    {
      'name': 'end_date',
      'align': 'center',
      'resize': true,
      'width': 190,
      'label': '结束时间'
    },
    {
      'name': 'duration',
      'align': 'center',
      'width': 180,
      template: function (obj) {
        return obj.duration + '天'
      }
    },
    {
      name: 'buttons', label: colHeader, width: 75, template: function () {
        return (
          '<i class="el-icon-edit-outline" data-action="edit"></i>' +
          '<i class="el-icon-circle-plus" data-action="add"></i>' +
          '<i class="el-icon-delete" data-action="delete"></i>'
        )
      }
    }
  ]
  // gantt.config.columns = [{
  //   name: 'text',
  //   label: '阶段名字'
  //   // label: '分项工程名称',
  //   // onrender: function(task, node) {
  //   //   node.setAttribute('class', 'gantt_cell gantt_last_cell gantt_cell_tree ' + task.status)
  //   // }
  // },
  // {
  //   name: 'duration',
  //   label: '时长',
  //   align: 'center',
  //   template: function(obj) {
  //     return obj.duration + '天'
  //   }
  // }, {
  //   name: 'add', label: '+', width: 50, resize: true, align: 'center',
  //   template: function (task) {
  //     return `<button onclick='addTask(${task.id})';>`
  //   }
  // }]

  gantt.config.grid_width = 350
  gantt.config.add_column = false // 添加符号

  // 时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  gantt.config.fit_tasks = true // 自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true // 将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  gantt.config.xml_date = '%Y-%m-%d' // 甘特图时间格式
  gantt.i18n.setLocale('cn') // 设置语言
  gantt.config.drag_resize = true // 允许用户通过拖拽任务的条形图的两端来改变工期
  gantt.config.drag_move = true // 允许用户拖动条形图来改变位置
  gantt.config.show_links = false // 禁用所有连接线
  gantt.config.readonly = false // 是否只读
  gantt.config.drag_progress = false // 允许用户推拽条形图上用来调整进度百分比的小按钮

  gantt.config.scale_height = 44
      gantt.config.scales = [
        {
          unit: 'day', step: 1, format: function (date) {
            var year = date.getFullYear()
            var month = ('0' + (date.getMonth() + 1)).slice(-2) // 月份从0开始，需要加1
            var day = ('0' + date.getDate()).slice(-2)
            return year + '<br/>' + month + '-' + day
          }
        }
      ]
      // 设置左侧表格滚动条
      gantt.config.layout = {
        css: 'gantt_container',
        cols: [
          {
            width: 700,
            min_width: 500,
            rows: [
              { view: 'grid', scrollX: 'gridScroll', scrollable: true, scrollY: 'scrollVer' },
              { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' }
            ]
          },
          { resizer: true, width: 1 },
          {
            rows: [
              { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
              { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' }
            ]
          },
          { view: 'scrollbar', id: 'scrollVer' }
        ]
      }
      gantt.config.show_quick_info = true // 显示快速信息框
      // 弹框样式优化
      gantt.templates.tooltip_text = function (start, end, task) {
        // console.log(task)
        return (
          '<b>' +
          task.name +
          '</b><br/>' +
          '</b><br/>' +
          'Progress: ' +
          Math.round(task.progress * 100) +
          '%' +
          '</b><br/>' +
          'PM:' +
          task.PM +
          '</b><br/>' +
          '状态:' +
          task.status +
          '</b><br/>' +
          '项目:' +
          task.project_name +
          '</b><br/>' +
          '任务:' +
          task.name
        )
      }
      // gantt.config.open_tree_initially = _that.isOpen // 默认展开所有任务
}
